Global Index
HTML5 JS API Index > Canvas Tutorials & Specs

CanvasRenderingContext2D

Implements CanvasDrawingStyles, CanvasPathMethods.

Properties
HTMLCanvasElement
canvas
The canvas attribute must return the value it was initialized to when the object was created.
SVGMatrix
currentTransform
The currentTransform, on getting, must return the last object that it was set to. On setting, its value must be changed to the new value, and the transformation matrix must be updated to match the matrix described by the new value. When the CanvasRenderingContext2D object is created, the currentTransform attribute must be set a newly created SVGMatrix object.
DOMString
direction
The direction IDL attribute, on getting, must return the current value. On setting, if the value is one of ltr, rtl, or inherit, then the value must be changed to the new value. Otherwise, the new value must be ignored. When the object implementing the CanvasDrawingStyles interface is created, the direction attribute must initially have the value inherit.
(DOMString or CanvasGradient or CanvasPattern)
fillStyle
The fillStyle attribute represents the color or style to use inside shapes, and the strokeStyle attribute represents the color or style to use for the lines around the shapes.
DOMString
font
The font IDL attribute, on setting, must be parsed the same way as the 'font' property of CSS (but without supporting property-independent style sheet syntax like 'inherit'), and the resulting font must be assigned to the context, with the 'line-height' component forced to 'normal', with the 'font-size' component converted to CSS pixels, and with system fonts being computed to explicit values.
unrestricted double
globalAlpha
The globalAlpha attribute gives an alpha value that is applied to shapes and images before they are composited onto the scratch bitmap. The value must be in the range from 0.0 (fully transparent) to 1.0 (no additional transparency). If an attempt is made to set the attribute to a value outside this range, including Infinity and Not-a-Number (NaN) values, the attribute must retain its previous value.
DOMString
globalCompositeOperation
The globalCompositeOperation attribute sets the current composition operator, which controls how shapes and images are drawn onto the scratch bitmap, once they have had globalAlpha and the current transformation matrix applied. The possible values are those defined in the Compositing and Blending specification.
unsigned long
height
The height attribute, on getting, must return the height of the rendering context's scratch bitmap, in CSS pixels. On setting, it must set bitmap dimensions to the current width of the rendering context's scratch bitmap in CSS pixels and the new value, respectively.
boolean
imageSmoothingEnabled
The imageSmoothingEnabled attribute, on getting, must return the last value it was set to. On setting, it must be set to the new value. When the CanvasRenderingContext2D object is created, the attribute must be set to true.
DOMString
lineCap
The lineCap attribute defines the type of endings that UAs will place on the end of lines. The three valid values are butt, round, and square.
unrestricted double
lineDashOffset
It is sometimes useful to change the "phase" of the dash pattern, e.g. to achieve a "marching ants" effect. The phase can be set using the lineDashOffset attribute. On getting, it must return the current value. On setting, infinite and NaN values must be ignored, leaving the value unchanged; other values must change the current value to the new value.
DOMString
lineJoin
The lineJoin attribute defines the type of corners that UAs will place where two lines meet. The three valid values are bevel, round, and miter.
unrestricted double
lineWidth
The lineWidth attribute gives the width of lines, in coordinate space units. On getting, it must return the current value. On setting, zero, negative, infinite, and NaN values must be ignored, leaving the value unchanged; other values must change the current value to the new value.
unrestricted double
miterLimit
When the lineJoin attribute has the value miter, strokes use the miter limit ratio to decide how to render joins. The miter limit ratio can be explicitly set using the miterLimit attribute. On getting, it must return the current value. On setting, zero, negative, infinite, and NaN values must be ignored, leaving the value unchanged; other values must change the current value to the new value.
unrestricted double
shadowBlur
The shadowBlur attribute specifies the level of the blurring effect. (The units do not map to coordinate space units, and are not affected by the current transformation matrix.)
DOMString
shadowColor
The shadowColor attribute sets the color of the shadow.
unrestricted double
shadowOffsetX
The shadowOffsetX and shadowOffsetY attributes specify the distance that the shadow will be offset in the positive horizontal and positive vertical distance respectively. Their values are in coordinate space units. They are not affected by the current transformation matrix.
unrestricted double
shadowOffsetY
The shadowOffsetX and shadowOffsetY attributes specify the distance that the shadow will be offset in the positive horizontal and positive vertical distance respectively. Their values are in coordinate space units. They are not affected by the current transformation matrix.
(DOMString or CanvasGradient or CanvasPattern)
strokeStyle
The fillStyle attribute represents the color or style to use inside shapes, and the strokeStyle attribute represents the color or style to use for the lines around the shapes.
DOMString
textAlign
The textAlign IDL attribute, on getting, must return the current value. On setting, if the value is one of start, end, left, right, or center, then the value must be changed to the new value. Otherwise, the new value must be ignored. When the object implementing the CanvasDrawingStyles interface is created, the textAlign attribute must initially have the value start.
DOMString
textBaseline
The textBaseline IDL attribute, on getting, must return the current value. On setting, if the value is one of top, hanging, middle, alphabetic, ideographic, or bottom, then the value must be changed to the new value. Otherwise, the new value must be ignored.
unsigned long
width
The width attribute, on getting, must return the width of the rendering context's scratch bitmap, in CSS pixels. On setting, it must set bitmap dimensions to the new value and the current height of the rendering context's scratch bitmap in CSS pixels, respectively.
Constructor
CanvasRenderingContext2D(optional unsigned long width, unsigned long height)
Operations
voidaddHitRegion(optional HitRegionOptions options)
void
arc(unrestricted double x, unrestricted double y, unrestricted double radius, unrestricted double startAngle, unrestricted double endAngle, optional boolean anticlockwise)
The arc(x, y, radius, startAngle, endAngle, anticlockwise) and ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) methods draw arcs.
void
arcTo(unrestricted double x1, unrestricted double y1, unrestricted double x2, unrestricted double y2, unrestricted double radius, optional unrestricted double radiusY, optional unrestricted double rotation)
The arcTo(x1, y1, x2, y2, radiusX, radiusY, rotation) method must first ensure there is a subpath for (x1, y1). Then, the behavior depends on the arguments and the last point in the subpath, as described below.
void
beginPath()
The beginPath() method must empty the list of subpaths in the context's current default path so that the it once again has zero subpaths.
void
bezierCurveTo(unrestricted double cp1x, unrestricted double cp1y, unrestricted double cp2x, unrestricted double cp2y, unrestricted double x, unrestricted double y)
The bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) method must ensure there is a subpath for (cp1x, cp1y), and then must connect the last point in the subpath to the given point (x, y) using a cubic Bézier curve with control points (cp1x, cp1y) and (cp2x, cp2y).
voidclearRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h)
void
clip(optional any fillRule_path, optional CanvasFillRule fillRule)
The clip() method must create a new clipping region by calculating the intersection of the current clipping region and the area described by the intended path, using the fill rule indicated by the fillRule argument. Open subpaths must be implicitly closed when computing the clipping region, without affecting the actual subpaths.
void
closePath()
The closePath() method must do nothing if the object's path has no subpaths. Otherwise, it must mark the last subpath as closed, create a new subpath whose first point is the same as the previous subpath's first point, and finally add this new subpath to the path.
voidcommit()
ImageData
createImageData(any sw_imagedata, optional double sh)
The ImageData() constructors and the createImageData() methods are used to instantiate new ImageData objects.
CanvasGradient
createLinearGradient(double x0, double y0, double x1, double y1)
The createLinearGradient(x0, y0, x1, y1) method takes four arguments that represent the start point (x0, y0) and end point (x1, y1) of the gradient. The method must return a linear CanvasGradient initialized with the specified line.
CanvasPattern
createPattern(CanvasImageSource image, DOMString repetition)
To create objects of this type, the createPattern(image, repetition) method is used.
CanvasGradient
createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1)
The createRadialGradient(x0, y0, r0, x1, y1, r1) method takes six arguments, the first three representing the start circle with origin (x0, y0) and radius r0, and the last three representing the end circle with origin (x1, y1) and radius r1. The values are in coordinate space units.
booleandrawCustomFocusRing(any element_path, optional Element element)
void
drawImage(CanvasImageSource image, unrestricted double dx_sx, unrestricted double dy_sy, optional unrestricted double dw_sw, optional unrestricted double dh_sh, optional unrestricted double dx, optional unrestricted double dy, optional unrestricted double dw, optional unrestricted double dh)
To draw images, the drawImage method can be used.
voiddrawSystemFocusRing(any element_path, optional Element element)
void
ellipse(unrestricted double x, unrestricted double y, unrestricted double radiusX, unrestricted double radiusY, unrestricted double rotation, unrestricted double startAngle, unrestricted double endAngle, optional boolean anticlockwise)
The arc(x, y, radius, startAngle, endAngle, anticlockwise) and ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) methods draw arcs.
void
fill(optional any fillRule_path, optional CanvasFillRule fillRule)
The fill() method must fill all the subpaths of the intended path, using fillStyle, and using the fill rule indicated by the fillRule argument. Open subpaths must be implicitly closed when being filled (without affecting the actual subpaths).
void
fillRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h)
The fillRect(x, y, w, h) method must paint the specified rectangular area using the fillStyle. If either height or width are zero, this method has no effect.
void
fillText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth)
The fillText() and strokeText() methods take three or four arguments, text, x, y, and optionally maxWidth, and render the given text at the given (x, y) coordinates ensuring that the text isn't wider than maxWidth if specified, using the current font, textAlign, and textBaseline values.
ImageData
getImageData(double sx, double sy, double sw, double sh)
The getImageData(sx, sy, sw, sh) method must, if either the sw or sh arguments are zero, throw an IndexSizeError exception; otherwise, if the scratch bitmap's origin-clean flag is set to false, it must throw a SecurityError exception; otherwise, it must return an ImageData object with width sw and height sh representing the scratch bitmap for the area of that bitmap denoted by the rectangle whose corners are the four points (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh), in the bitmap's coordinate space units.
sequence<unrestricted double>
getLineDash()
When the getLineDash() method is invoked, it must return a sequence whose values are the values of the object's dash list, in the same order.
boolean
isPointInPath(any x_path, unrestricted double y_x, optional any fillRule_y, optional CanvasFillRule fillRule)
The isPointInPath() method must return true if the point given by the x and y coordinates passed to the method, when treated as coordinates in the canvas coordinate space unaffected by the current transformation, is inside the intended path as determined by the fill rule indicated by the fillRule argument; and must return false otherwise.
boolean
isPointInStroke(any x_path, unrestricted double y_x, optional unrestricted double y)
The isPointInStroke() method must return true if the point given by the x and y coordinates passed to the method, when treated as coordinates in the canvas coordinate space unaffected by the current transformation, is inside the path that results from tracing the intended path, using the non-zero winding rule, and using the CanvasRenderingContext2D object for the line styles; and must return false otherwise.
void
lineTo(unrestricted double x, unrestricted double y)
The lineTo(x, y) method must ensure there is a subpath for (x, y) if the object's path has no subpaths. Otherwise, it must connect the last point in the subpath to the given point (x, y) using a straight line, and must then add the given point (x, y) to the subpath.
TextMetrics
measureText(DOMString text)
The measureText() method takes one argument, text. When the method is invoked, the user agent must run the text preparation algorithm, passing it text and the CanvasRenderingContext2D object, and then using the returned inline box must create a new TextMetrics object with its attributes set as described in the following list.
void
moveTo(unrestricted double x, unrestricted double y)
The moveTo(x, y) method must create a new subpath with the specified point as its first (and only) point.
void
putImageData(ImageData imagedata, double dx, double dy, optional double dirtyX, optional double dirtyY, optional double dirtyWidth, optional double dirtyHeight)
The putImageData() method writes data from ImageData structures back to the rendering context's scratch bitmap. Its arguments are: imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, and dirtyHeight.
void
quadraticCurveTo(unrestricted double cpx, unrestricted double cpy, unrestricted double x, unrestricted double y)
The quadraticCurveTo(cpx, cpy, x, y) method must ensure there is a subpath for (cpx, cpy), and then must connect the last point in the subpath to the given point (x, y) using a quadratic Bézier curve with control point (cpx, cpy), and must then add the given point (x, y) to the subpath.
void
rect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h)
The rect(x, y, w, h) method must create a new subpath containing just the four points (x, y), (x+w, y), (x+w, y+h), (x, y+h), in that order, with those four points connected by straight lines, and must then mark the subpath as closed. It must then create a new subpath with the point (x, y) as the only point in the subpath.
voidremoveHitRegion(DOMString id)
void
resetClip()
The resetClip() method must create a new clipping region that is the largest infinite surface. The new clipping region replaces the current clipping region.
void
resetTransform()
The resetTransform() method must reset the current transform to the identity matrix.
void
restore()
The restore() method must pop the top entry in the drawing state stack, and reset the drawing state it describes. If there is no saved state, the method must do nothing.
void
rotate(unrestricted double angle)
The rotate(angle) method must add the rotation transformation described by the argument to the transformation matrix. The angle argument represents a clockwise rotation angle expressed in radians.
void
save()
The save() method must push a copy of the current drawing state onto the drawing state stack.
void
scale(unrestricted double x, unrestricted double y)
The scale(x, y) method must add the scaling transformation described by the arguments to the transformation matrix. The x argument represents the scale factor in the horizontal direction and the y argument represents the scale factor in the vertical direction.
voidscrollPathIntoView(optional Path2D path)
voidsetLineDash(sequence<unrestricted double> segments)
void
setTransform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f)
The setTransform(a, b, c, d, e, f) method must reset the current transform to the identity matrix, and then invoke the transform(a, b, c, d, e, f) method with the same arguments.
void
stroke(optional Path2D path)
The stroke() method must trace the intended path, using the CanvasRenderingContext2D object for the line styles, and then fill the resulting path using the strokeStyle attribute, using the non-zero winding rule.
void
strokeRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h)
The strokeRect(x, y, w, h) method must take the result of tracing the path described below, using the CanvasRenderingContext2D object's line styles, and fill it with the strokeStyle.
void
strokeText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth)
The fillText() and strokeText() methods take three or four arguments, text, x, y, and optionally maxWidth, and render the given text at the given (x, y) coordinates ensuring that the text isn't wider than maxWidth if specified, using the current font, textAlign, and textBaseline values.
voidtransform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f)
void
translate(unrestricted double x, unrestricted double y)
The translate(x, y) method must add the translation transformation described by the arguments to the transformation matrix. The x argument represents the translation distance in the horizontal direction and the y argument represents the translation distance in the vertical direction.
Referenced by
CanvasProxysetContext(...)
HTMLCanvasElementsetContext(...)
ImageBitmapFactoriescreateImageBitmap(...)